<template>
  <div >
    <!-- 第一，第二题 -->
     <div >
        <img src="https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg" alt="">
     <p @click="btn" :style="{background: color} ">这是一只可爱的修狗儿</p>
     </div>

     <!-- 第三题 -->
       <div >
        <img :src="dogImg" alt="">
     <p @click="btn" :style="{background: color} ">{{dogName}}</p>
     </div>
   </div>
</template>
 
<script>
export default {
  components: {},
  props: {
    dogImg:String,
    dogName:String,

  },
  data() {
    return {
        color:'',
       
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    btn(){
        this.color =`rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(
        Math.random() * 256
      )}, ${Math.floor(Math.random() * 256)})`
    }
  }
};
</script>

<style scoped>
     div{
        width: 200px;
        border: 1px solid black;
        text-align: center;
        float: left;
     }
     div img {
        width: 100%;
        
        
     }
</style>